<template>
	<div>
		<BreadList :list="['Home','System',{name:'TimeLine'},'Edit']"></BreadList>
		<a-card>
			<h2>{{editStatus == 0 ? '添加时间轴' : '修改时间轴'}}</h2>
			<a-form-model ref="ruleForm" :model="editForm">
				<a-form-model-item has-feedback label="时间轴标题">
					<a-input addon-before="cloud-myblog" v-model="editForm.title" type="text" />
				</a-form-model-item>
				<a-form-model-item has-feedback label="时间轴内容" prop="content">
					<mavon-editor v-model="editForm.content" />
				</a-form-model-item> 
				<a-form-model-item v-if="editForm.createTime != undefined" has-feedback label="创建时间" prop="createTime">
					<a-input v-model="editForm.createTime" disabled type="text" />
				</a-form-model-item>
				<a-form-model-item v-if="editForm.updateTime != undefined" has-feedback label="更新时间" prop="updateTime">
					<a-input v-model="editForm.updateTime" disabled type="text" />
				</a-form-model-item>
				<a-form-model-item v-if="editStatus !== 0"  has-feedback label="展示状态" prop="enabled">
					<a-tag v-if="editForm.enabled == 1" color="#87d068">
						启用
					</a-tag>
					<a-tag v-else color="#f50">
						未启用
					</a-tag>
				</a-form-model-item>
				<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="submitForm('ruleForm')">
						Submit
					</a-button>
					<a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
						Reset
					</a-button>
				</a-form-model-item>
			</a-form-model>
		</a-card>
	</div>
</template>

<script>
	import {getTimeLineById,addTimeLine,updateTimeLine} from '@/api/System.js'
	export default {
		name: 'TimeLineEdit',
		created () {
			const id = this.$route.query.id
			if (id != undefined) {
				this.editStatus = 1
				this.getById(id)
			}
		},
		data () {
			return {
				// 0 表示添加， 1 表示修改
				editStatus: 0,
				editForm: {},
				rules: {}
			}
		},
		methods: {
			async getById (id) {
				const {data : res} = await getTimeLineById(id)
				// console.log(res.data)
				if (res.code != 20005) 
					return this.$message.error('查询出错')
				this.editForm = res.data
				this.$message.success(res.msg)
			},			
			submitForm(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						// 添加时间轴
						if (this.editStatus == 0) {
							const {data : res} = await addTimeLine({
								title: this.editForm.title,
								content: this.editForm.content
							})
							if (res.code !== 20006) 
								return this.$message.error('添加出错')
							this.$message.success(res.msg)
						}
						// 修改时间轴
						if (this.editStatus == 1) {
							const {data : res} = await updateTimeLine(this.editForm)
							if (res.code !== 20008) 
								return this.$message.error('修改出错')
							this.$message.success(res.msg)
						}
						return this.$router.push('/system/timeline')
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	}
</script>

<style>
</style>
